<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Exemple de liste triable par glisser/déposer</title>
        <meta name="author" content="forresst" />
        <script src="../scripts_js/fonctions.js"></script>
        <script type="text/javascript" src="../scripts_js/XMLHttpRequest.js"></script>
        <script src="../scripts_js/jquery-1.10.0.min.js"></script>
        <script src="../scripts_js/jquery.mobile-1.3.0.js"></script>
        <script src="../scripts_js/jquery-ui.js"></script>
        <script src="../scripts_js/jquery.ui.touch-punch.js"></script>
        <script src="../scripts_js/jquery.flip.js"></script>

    </head>
    <body onload="initActivite()">

        <script>
        var pic1 = new Array();
        var pic2 = new Array();
        var idAct;
        var bd;
        var son;
        var ins;
        var nbLignes;
        var nbColonnes;
        var width;
        var height;
        var nb = 0;

        function initActivite() {
            var xhr = getXMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                    //alert("[" + xhr.responseText + "]");
                    //callback(xhr.responseText);
                    var docXML = xhr.responseText;
                    var listeDesActivites = stringToXML(docXML);
                    remplirinfos(listeDesActivites);
                }
            };
            var fd = new FormData();
            fd.append("identifiant", extractUrlParams('id'));

            xhr.open("POST", "../scripts_php/activite_recuperer_mysql.php", false);
            xhr.send(fd);
        }

        function remplirinfos(xml) {
            var listeDAdultes = xml.getElementsByTagName("activite");
            idAct = listeDAdultes[0].getElementsByTagName("identifiant")[0].childNodes[0].nodeValue;
            bd = listeDAdultes[0].getElementsByTagName("bordures")[0].childNodes[0].nodeValue;
            son = listeDAdultes[0].getElementsByTagName("son")[0].childNodes[0].nodeValue;
            ins = listeDAdultes[0].getElementsByTagName("instruction")[0].childNodes[0].nodeValue;
             var cons = document.createElement('div');
            cons.setAttribute('style', "width: 100%; text-align: center; position: fixed; margin-top: 1%; font-size: "+ window.innerHeight / 25 + "px; ");
            cons.appendChild(document.createTextNode(listeDAdultes[0].getElementsByTagName("instruction")[0].childNodes[0].nodeValue));
            document.getElementsByTagName('body')[0].appendChild(cons);
            initPictos();

        }

        function initPictos() {
            var xhr = getXMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                    //alert("[" + xhr.responseText + "]");
                    //callback(xhr.responseText);
                    var docXML = xhr.responseText;
                    var listeDesActivites = stringToXML(docXML);
                    remplirinfos2(listeDesActivites);
                }
            };
            var fd = new FormData();
            fd.append("identifiant", extractUrlParams('id'));

            xhr.open("POST", "../scripts_php/gridLayout_recuperer_mysql.php", false);
            xhr.send(fd);
        }
        function remplirinfos2(xml) {
            var listeDAdultes = xml.getElementsByTagName("activite");
            nbLignes = listeDAdultes[0].getElementsByTagName("lignes")[0].childNodes[0].nodeValue;
            nbColonnes = listeDAdultes[0].getElementsByTagName("colonnes")[0].childNodes[0].nodeValue;
            width = window.innerWidth / (nbColonnes * 2);
            height = window.innerHeight / (nbLignes * 2);
            init();

        }

        function infosPictos(num, h, l) {
            //alert(width+" "+window.innerWidth+" "+nbPicto);
            var xhr = getXMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                    //alert("[" + xhr.responseText + "]");
                    //callback(xhr.responseText);
                    var docXML = xhr.responseText;
                    var listeDesActivites = stringToXML(docXML);
                    placerRectangle(listeDesActivites, h, l);
                }
            };
            var fd = new FormData();
            fd.append("identifiant", idAct);
            fd.append("numero", num);

            xhr.open("POST", "../scripts_php/activite_has_Pictogramme_recuperer_par_activite_ et_numero.php", false);
            xhr.send(fd);
        }

        function findPicto(id, h, l) {
            var xhr = getXMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                    //alert("[" + xhr.responseText + "]");
                    //callback(xhr.responseText);
                    var docXML = xhr.responseText;
                    var listeDesActivites = stringToXML(docXML);
                    ajouterPicto(listeDesActivites, h, l);
                }
            };
            var fd = new FormData();
            fd.append("identifiant", id);

            xhr.open('POST', "../scripts_php/picto_recuperer_mysql.php", false);
            xhr.send(fd);
        }




        function placerRectangle(xml, h, l) {

            var tagnom = xml.getElementsByTagName('listeDesActivites');
            var img = tagnom[0].getElementsByTagName('activite');
            for (var i = 0; i < img.length; i++) {
                //alert(img[i].getElementsByTagName('identifiant')[0].firstChild.nodeValue);
                var id = img[i].getElementsByTagName('pictogramme')[0].firstChild.nodeValue;
                findPicto(id, h, l);
            }



        }

        function ajouterPicto(xml, h, l) {
            var body = document.getElementsByTagName('body')[0];
            var listeDAdultes = xml.getElementsByTagName("pictogramme");
            var img = document.createElement('img');
            img.setAttribute('src', '../images/Fondcarte.png');
            img.setAttribute('name', 'carte');
            img.setAttribute('style', "display: inline-block; margin-left: " + l + "px; margin-top: " + h + "px; border: 5px black solid; width: " + width + "px; height: " + height + "px; position: fixed;");
            img.dataset.num = listeDAdultes[0].getElementsByTagName('identifiant')[0].firstChild.nodeValue;
            body.appendChild(img);

            $(img).click(function() {
                var audioElement2 = document.createElement('audio');
                audioElement2.setAttribute('src', "../sonPicto/" + listeDAdultes[0].getElementsByTagName('son')[0].firstChild.nodeValue);
                audioElement2.play();
                if (img.name !== 'find') {
                    $(this).flip({
                        direction: 'lr',
                        content: function() {
                            if (img.name === 'carte') {
                                nb++;
                                img.setAttribute('src', "../imagesPicto/" + listeDAdultes[0].getElementsByTagName('image')[0].firstChild.nodeValue);
                                img.setAttribute('name', 'carte_r');
                            }
                            else {
                                nb = 0;
                                img.setAttribute('src', '../images/Fondcarte.png');
                                img.setAttribute('name', 'carte');
                            }

                        },
                        onEnd: function() {
                            if (nb === 2) {
                                nb = 0;
                                img.setAttribute('name', 'carte_r2');
                                var image = document.getElementsByName("carte_r");
                                if (document.getElementsByName("carte_r2")[0].dataset.num === document.getElementsByName("carte_r")[0].dataset.num) {
                                    document.getElementsByName("carte_r2")[0].setAttribute('name', 'find');
                                    document.getElementsByName("carte_r")[0].setAttribute('name', 'find');

                                    var isfinished = document.getElementsByName("find");
                                    if (isfinished.length === (nbColonnes * nbLignes)) {
                                        var audioElement2 = document.createElement('audio');
                                        audioElement2.setAttribute('src', "../sonsActivite/" + son);
                                        audioElement2.setAttribute('onended', "redirection()");
                                        audioElement2.play();
                                        alert('Bravo vous avez fini l\'exercice');
                                    }
                                }
                                else {
                                    setTimeout(function(){
                                    document.getElementsByName("carte_r2")[0].setAttribute('src', '../images/Fondcarte.png');
                                    document.getElementsByName("carte_r2")[0].setAttribute('name', 'carte');
                                    document.getElementsByName("carte_r")[0].setAttribute('src', '../images/Fondcarte.png');
                                    document.getElementsByName("carte_r")[0].setAttribute('name', 'carte');},600);

                                }

                            }
                        }


                    })
                }
            });


        }

        function init() {
            //Image de fond
            var html = document.getElementsByTagName('html')[0];
            if (bd === '2') {
                html.setAttribute('style', "height: 100%; min-height: 100%; background-image: url(../images/deux_bordures.png); background-position:center; background-repeat:no-repeat; background-size: 100% 100%; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%;");

            }
            else {
                if (bd === '4') {
                    html.setAttribute('style', "height: 100%; min-height: 100%; background-image: url(../images/quatre_bordures.png); background-position:center; background-repeat:no-repeat; background-size: 100% 100%; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%;");
                }

            }

            for (var i = 0; i < ((nbLignes * nbColonnes) / 2); i++) {
                pic1[i] = (i + 1);
                pic2[i] = (i + 1);

            }


            pic1.shuffle();     // on mélange le tableau
            pic2.shuffle();     // on mélange le tableau


            var marge_left = 50;
            var marge_top = 70;
            var k = 0;
            var m = 0;
            var b = 0;
            //alert(nbLignes + " " + nbColonnes);
            for (var i = 0; i < (nbLignes); i++) {
                for (var j = 0; j < (nbColonnes); j++) {
                    if (b == 0) {
                        infosPictos(pic1[k], marge_top, marge_left);
                        b = 1;
                        k++;
                    }
                    else {
                        infosPictos(pic2[m], marge_top, marge_left);
                        b = 0;
                        m++
                    }
                    marge_left += (width * 2);

                }
                marge_top += (height * 2);
                marge_left = 50;
            }

        }



        function redirection() {
            window.location = "../partie_lecteur/index.html";
        }



        function extractUrlParams(nom) {
            var t = location.search.substring(1).split('&');
            for (var i = 0; i < t.length; i++) {
                var x = t[ i ].split('=');
                if (x[0] == nom) {
                    return x[1];
                }
            }
            return null;
        }

        function randomInt(mini, maxi)
        {
            var nb = mini + (maxi + 1 - mini) * Math.random();
            return Math.floor(nb);
        }

        Array.prototype.shuffle = function(n)
        {
            if (!n)
                n = this.length;
            if (n > 1)
            {
                var i = randomInt(0, n - 1);
                var tmp = this[i];
                this[i] = this[n - 1];
                this[n - 1] = tmp;
                this.shuffle(n - 1);
            }
        }



        </script>
    </body>
</html>